<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
		<title>添加会员-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" th:href="@{/css/font.css}">
	<link rel="stylesheet" th:href="@{/css/weadmin.css}">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>
<style>

	.inp{
		width:190px;
		display: inline-block;
		height: 38px;
		line-height: 38px;
		padding: 0;
		background-color: #009688;
		color: #fff;
		white-space: nowrap;
		text-align: center;
		font-size: 14px;
		border: none;
		border-radius: 2px;


	}

	input[type=file]{
		position: relative;
		top:-38px;
		z-index: 999;
		opacity: 0;
		cursor: pointer;
	}
	#userdefinedFile{
		width:100%;
		border:none;
	}
</style>
<script>
	window.onload=function () {
		document.getElementById("file").onchange = function() {
			document.getElementById("userdefinedFile").value = document.getElementById("file").value;
		}
	}

</script>
	<body>
		<div class="weadmin-body">
			<form class="layui-form">
				<div class="layui-form-item">
					<label for="L_username" class="layui-form-label">
		                <span class="we-red">*</span>用户名
		            </label>
					<div class="layui-input-inline">
						<input type="text" id="L_username" name="username" lay-verify="required|nikename" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="L_password" class="layui-form-label">
						<span class="we-red">*</span>密码
					</label>
					<div class="layui-input-inline">
						<input type="text" id="L_password" name="password" lay-verify="required|nikename" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">
						头像
					</label>
					<div class="layui-input-inline">
						<div class="layui-upload">
							<div class="inp">选择文件 </div>
							<input type="file" id="file" value="选择文件" class="inpp">
							　　<input type="text"  id="userdefinedFile" value="未选择任何文件">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label for="L_username" class="layui-form-label">
						<span class="we-red">*</span>昵称
					</label>
					<div class="layui-input-inline">
						<input type="text" id="L_nickname" name="nickname" lay-verify="required|nikename" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
				    <label for="L_role" class="layui-form-label">角色</label>
				    <div class="layui-input-block" id="L_role">
				      <input type="radio" name="role" value="0" title="管理员" checked>
				      <input type="radio" name="role" value="1" title="普通用户">
				    </div>
				</div>
				<button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
			</form>
			<span id="headerUserId" th:text="${session.admin.getId()}" style="display: none"></span>
			<span id="headerUserToken" th:text="${session.admin.getUserToken()}" style="display: none"></span>
		</div>
		<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
		<script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
		
		<script>
			layui.extend({
				admin: '{/}/js/admin'
			});
			layui.use(['form', 'jquery','util','admin', 'layer','upload'], function() {
				var form = layui.form,
					$ = layui.jquery,
					util = layui.util,
					admin = layui.admin,
					layer = layui.layer,
					upload=layui.upload;

				//监听提交
				form.on('submit(add)', function(data) {
					var  headerUserId = document.getElementById("headerUserId").innerText;
					var  headerUserToken = document.getElementById("headerUserToken").innerText;
					var file =document.getElementById('file').files[0];
					var username = data.field.username;
					var password = data.field.password;
					var nickname = data.field.nickname;
					var role = data.field.role;
					var formData = new FormData();
					formData.append('username',username);
					formData.append('password',password);
					formData.append('file',file);
					formData.append('nickname',nickname);
					formData.append('role',role);
					$.ajax({
						url: '/admin/user_add',
						type:'post',
						processData:false,
						data:formData,
						contentType: false,
						dataType: "json",
						headers:{
							headerUserId: headerUserId,
							headerUserToken: headerUserToken
						},
						success: function (res) {
							console.log(res);
							if (res.status == 500){
								layer.msg(res.msg);
                            }else if (res.status == 200){
                                layer.msg('添加成功');
							}
						}
					});
                    return false;
				});
			});
		</script>
	</body>

</html>